<template>
  <el-popover :visible="visible" :width="300" :hide-after="0">
    <template #reference>
      <el-input
          v-model="modelValue"
          readonly
          placeholder=""
          @click="visible = !visible"
          @blur="visible = !visible"
          style="width: 202px !important;"
      >
        <template #prepend>
          <el-button :icon="modelValue as string" disabled/>
        </template>
      </el-input>
    </template>
    <div class="el-icon-picker">
      <div v-for="icon in globalProperties.$icons" :key="icon">
        <component :class="[icon, 'icon', { 'icon-active': icon == modelValue }]" :is="icon"
                   @click="selectedIcon(icon)">
        </component>
      </div>
    </div>
  </el-popover>
</template>
<script setup lang="ts">

const {appContext: {app: {config: {globalProperties}}}} = getCurrentInstance() as any

interface Props {
  modelValue?: string
}

const props = defineProps<Props>()

const {modelValue} = toRefs(props)

const emits = defineEmits(['update:modelValue'])

let visible = ref(false)
const selectedIcon = (icon: string) => {
  visible.value = false
  emits('update:modelValue', icon)
}
</script>
<style lang="scss" scoped>
.el-icon-picker {
  height: 200px;
  overflow-y: scroll;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: var(--el-text-color-regular);
  font-size: 20px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 45px;
  margin: 5px;
}

.icon:hover {
  color: var(--el-color-primary);
}

.icon-active {
  color: var(--el-color-primary);
}
</style>
